<template>
	<view class="findChatInfo">
		<comHead :title="title" :isLeft="true" :isRight="false"></comHead>

		<view class="contentBox">
			<view class="searchBox">
				<image src="https://siha.vxmeng.com/static/social/search.png" mode="widthFix"></image>
				<input type="text" :placeholder="$t('sjzx.ss')" v-model="search" @confirm="getUserQunMsgList" />
			</view>
			<view class="listBox" v-if="userQunMsgList.length>0">
				<view class="item" v-for="(item,index) in userQunMsgList" v-if="item.type==1">
					<image :src="getImg(item.avatar)" mode="aspectFill"></image>
					<view class="box">
						<view class="t">
							<text>{{item.nickname}}</text>
							<text>{{item.create_time}}</text>
						</view>
						<view class="b">
							<view>{{item.remark}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="listBox" v-else>
				<text class="none">暂无记录</text>
			</view>
			<!-- <view class="history">
				<view class="top">
					<text>历史记录</text>
					<image src="https://siha.oss-cn-beijing.aliyuncs.com/static/social/delete.png" mode="aspectFit"></image>
				</view>
				<view class="list">
					<text class="item" v-for="item in 4">晚安</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: "",
				title: '查找聊天信息',
				id: '',
				userQunMsgList: [],
				isQun: 1
			}
		},
		onLoad(options) {
			this.id = options.id
			this.isQun = options.isQun
			// this.getUserQunMsgList()
		},
		methods: {
			async getUserQunMsgList() {
				console.log(this.isQun)
				let url = "api/lt/getMsg"
				let objData = {
					to_user_id: this.id,
					page: 1,
					limit: 20000,
					page_size: 20000,
					remark: this.search
				}
				if (this.isQun==2) {
					url = "api/qun/getUserQunMsgList"
					objData = {
						qun_id: this.id,
						page: 1,
						limit: 20000,
						page_size: 20000,
						remark: this.search
					}
				}
				const res = await this.$myRequest({
					url: url,
					data: objData
				})
				if (res.code == 1) {
					console.log(res)
					this.userQunMsgList = res.data.list
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.findChatInfo {
		.contentBox {
			padding: 0 30rpx;

			.searchBox {
				width: 100%;
				height: 68rpx;
				flex-shrink: 0;
				background: rgba(#767B82, 0.3);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				image {
					width: 29rpx;
					margin-right: 20rpx;
				}

				input {
					width: 100%;
					color: #fff;
					font-size: 28rpx;
				}
			}

			.listBox {
				width: 100%;
				padding: 30rpx 0;
				box-sizing: border-box;

				.none {
					width: 100%;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					color: #999;
					padding: 50rpx 0;
					font-size: 24rpx;
				}

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 0;
					border-bottom: 2rpx solid rgba(#eee, 0.1);

					image {
						width: 80rpx;
						height: 80rpx;
						background: rgba(#eee, 0.1);
						border-radius: 10rpx;
					}

					.box {
						width: calc(100% - 100rpx);

						.t {
							color: #999;
							margin-bottom: 10rpx;
							font-size: 28rpx;
							display: flex;
							width: 100%;
							align-items: center;
							justify-content: space-between;
						}

						.b {
							color: #fff;
							font-size: 26rpx;
							width: 100%;
							overflow: hidden;
						}
					}
				}
			}

			.history {
				font-size: 28rpx;

				.top {
					padding: 40rpx 0;
					display: flex;
					justify-content: space-between;
					color: #A2A2A2;

					image {
						width: 40rpx;
					}
				}

				.list {
					display: flex;
					flex-wrap: wrap;
					padding: 0px 50rpx;

					.item {
						width: 42%;
						margin-right: 8%;
						display: flex;
						align-items: center;
						margin-bottom: 22rpx;
						font-size: 28rpx;
						color: #D8D8D8;
					}
				}
			}
		}
	}
</style>